<template>
	<view class="page-container">
		<view class="padded-15" style="height: 100%;">
			<view class="font-18 padded-5">风险预警</view>
			<scroll-view
				class="page-list"
				scroll-y="true"
				@scrolltolower="getList"
			>
				<view class="list-item" v-for="(item, index) in list" :key="index" :data-url="'/pages/risk/detail?id='+item.id" @click="Jump">
					<view class="clearfix">
						<view class="pull-left">
							<text class="font-16" v-if="item.type == '1'">行业预警</text>
							<text class="font-16" v-else-if="item.type == '2'">产品预警</text>
						</view>
						<view class="pull-right">
							<uni-badge v-if="item.is_read==0" class="" :is-dot="true" text="0" absolute="rightTop" size="small" :customStyle="{background: '#F54966'}" :offset="[-2,-2]">
								<text class="color-B1B8C7">{{ item.create_time }}</text>
							</uni-badge>
							<uni-badge v-if="item.is_read==1" class="" :is-dot="true" text="0" absolute="rightTop" size="small" :customStyle="{background: '#ffffff'}" :offset="[-2,-2]">
								<text class="color-B1B8C7">{{ item.create_time }}</text>
							</uni-badge>
						</view>
					</view>
					<view class="padded-t-15">
						<text class="content color-646D7F">{{ item.jswa }}</text>
						<!-- <text class="content color-646D7F">中国银行将减少对房地产行业的放款sit amet,consectetur adipiscing elit. Aenean euismodbibendum laoreet. Proin gravida dolor sitamet lacus</text> -->
					</view>
					<view class="padded-t-15 ellipsis-1">
						<text class="color-646D7F">涉及产品：{{ item.cpmc }}</text>
					</view>
				</view>
				
				<uni-load-more :status="more"></uni-load-more>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],		// 列表数据
				page: 1,		// 页码
				limit: 10,		// 每页
				more: 'more',	// 加载状态
				
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.limit = 10
			this.more = 'more'
			this.getList()
		},
		methods: {
			getList() {
				console.log(this.more)
				if(this.more == 'loading' || this.more == 'no-more') {
					
					return
				}
				
				this.more = 'loading'
				// return
				// console.log(this.page)
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/fxlist', // 接口地址。
				    data: {
				        page: this.page,
						limit: this.limit,
						mid:localStorage.getItem('mid')
				    },
				    success: (res) => {
				        // console.log(res)
				        if(res.statusCode == 200) {
							if(res.data.code == 1) {
								this.list = [...this.list, ...res.data.data]
								// console.log(res.data.data.length)
								if(res.data.data.length == this.limit) {
									this.page++
									this.more = 'more'
								}else {
									this.more = 'no-more'
								}
								// console.log(this.more)
							}else {
								this.more = 'no-more'
							}
						}else {
							uni.showToast({
								title: res.errMsg,
								duration: 2000
							})
							this.more = 'no-more'
						}
						
				    }
				});
			},
			
			Jump(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	
	.page-list {
		padding-top: 10px;
		height: calc(100% - 32px);
		
		.list-item {
			background-color: #FFFFFF;
			padding: 15px;
			border-radius: 10px;
			margin-bottom: 10px;
			box-shadow: 0 0 2px 2px rgba(242, 242, 242, 0.7);
			
			.content {
				word-break: break-all;
			}
			
			.ellipsis-1 {
				width: 100%; 				/* 设定容器的宽度 */
				overflow: hidden; 			/* 隐藏溢出的内容 */
				text-overflow: ellipsis; 	/* 显示省略号 */
				white-space: nowrap; 		/* 防止文本换行 */
			}
		}
	}
	
</style>
